Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix layout issues around images on the About page for narrow screens (#471) #477

Conversation

marceloams
Copy link
Contributor

@marceloams marceloams commented Oct 5, 2024

Closes #471. In narrow screens (mobile), the images are now displayed above the text for improved readability.

@wbazant wbazant self-requested a review October 5, 2024 07:52
@wbazant
Copy link
Collaborator

wbazant commented Oct 5, 2024

Thanks for making the changes, the text is more readable now! Would you be up for trying flex layouts?

Screenshot from 2024-10-05 08-51-42
The pictures don't need to be up to 160px if they're not to the side of the text, this 2x2 grid could take the whole width.

I think this would look even better in a flex layout too: the staff member's picture to the right, their name and email to the left, centered vertically, and jointly taking the whole width.
Screenshot from 2024-10-05 08-52-15

@marceloams
Copy link
Contributor Author

Hey @wbazant,

I've implemented the changes you requested for the grid. I also set a max height to prevent it from becoming too large, as you can see below:

Captura de tela de 2024-10-06 13-32-11

For the staff members section, this is the current result:

Captura de tela de 2024-10-06 13-05-09

However, I'd like to propose an alternative approach, where the image remains on the left and the text on the right. When the text exceeds the height of the image, it wraps underneath, taking up the full width, as shown below:

Captura de tela de 2024-10-06 13-26-26

I added a justify alignment for the text in this layout, but the left alignment works well too. Let me know your preference!

@wbazant
Copy link
Collaborator

wbazant commented Oct 8, 2024

@marceloams thanks for making the grid take up the full width, it does look better on the screenshot. For the second part, I think your solution works better than what I proposed - once the director's name /title/ email fits on the right, then the text underneath will fit too. Would you push those changes to the branch?

@marceloams
Copy link
Contributor Author

@wbazant I've completed the requested changes. Please take a look when you have a moment, and I look forward to your feedback!

…471):

- Updated image grid to span full width on mobile.
- In the staff section, images remain aligned to the left, with text on the right. When the text exceeds the image height, it wraps beneath and occupies full width for better readability.
@marceloams marceloams force-pushed the fix/bad-flow-around-images-on-about-page-with-narrow-screen branch from c4b53cb to 18deada Compare October 9, 2024 04:34
@wbazant wbazant merged commit 7cedc72 into falling-fruit:main Oct 9, 2024
@wbazant
Copy link
Collaborator

wbazant commented Oct 9, 2024

Thanks, that renders itself well on various screen sizes! I have an amendment to suggest but opening a PR to your fork felt like overkill here, so I merged your commit and opened #491 .

Would you be up for doing some other work on the project? The next thing to do for the About page is probably #492 , or you're welcome to grab any other issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Bad flow around images on about page with narrow screen
2 participants